<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="com.sks.bean.pojo.House"%>
<%@page import="com.sks.bean.pojo.Config"%>
<%@page import="java.util.Set"%>
<%@page import="com.sks.utils.WebUtil"%>
<%@page import="com.sks.bean.pojo.Users"%>
<%@ include file="/sks/cms/page/share/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String menuName = request.getParameter("menuName") == null ? "" : (String)request.getParameter("menuName");
boolean isRent = true;
if ("houseListBuy".equals(menuName)) {
	isRent = false;
}
boolean isCollected = (Boolean) request.getAttribute("isCollected") != null ? (Boolean) request.getAttribute("isCollected") : false;
%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="租房,买房,三棵松,地产,中介" />
<meta name="description" content="三棵松地产" />
<title>三棵松地产</title>
<link type="text/css" rel="stylesheet" href="<%=basePath%>sks/css/frontpages/common.css">
<link type="text/css" rel="stylesheet" href="<%=basePath%>sks/css/frontpages/houseInfo.css">
<script type="text/javascript" src="/js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="<%=basePath%>sks/js/frontpages/jquery.cookie.js"></script>
<link type="text/css" href="<%=basePath%>map/css/map.css" rev="stylesheet" rel="stylesheet">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script> 
<script type="text/javascript" src="<%=basePath%>map/js/simpleMap.js"></script>
<script type="text/javascript">
var showMap = ${null != house.building.lng && null != house.building.lat ? "true" : "false"};
function bodyOnLoad() {
	if (!showMap) {
		var name = '${house.building.name}';
		var lng = '${house.building.lng}';
		var lat = '${house.building.lat}';
		var str = lng + '|' + lat;
		var data = {
			name : name,
			point : str
		};
		initMap(data);
	} else {
		var container = document.getElementById('container');
		var imgNode = document.createElement('img');
		imgNode.src = "<%=basePath%>sks/img/frontpages/nohouse.jpg";
		//imgNode.width = '670';
		imgNode.height = '300';
		//imgNode.style = "align:center;";
		container.appendChild(imgNode);
	}
}
</script>
</head>
<body onload="bodyOnLoad();">
<div class="wrap">
	<jsp:include page="../header.jsp"></jsp:include>
	<div>
		<div>
			<a href="<%=basePath%>" hidefocus="true">SKS房地产</a> &gt;
			<a href="<%=basePath%>sks/house.do?method=list&menuName=<%=menuName%>" target="_self" hidefocus="true"><%=isRent ? "租房" : "买房"%></a> &gt;					
			<a href="<%=basePath%>sks/house.do?method=info&menuName=<%=menuName%>&houseId=${house.houseId}" hidefocus="true">${house.title}</a>
		</div>		
		<div class="clear"></div>
	</div>
	
	<div class="house_detail bc mb10">
		<h2 title="${house.title}">${house.title}</h2>
		<!-- <div class="house_id">（房源ID：${house.houseId}）</div> -->
		<div class="house_detail_wrap clearfix">
			<div class="house_detail_l fl ml10">
				<div class="imgCenter">
					<p>
						<c:if test="${fn:length(house.pictures) eq 0}">
							<img class="sn_img"
								src="<%=basePath%>sks/img/frontpages/lack_house_b.png" />
						</c:if>
						<c:if test="${fn:length(house.pictures) ne 0}">
						<img id="preview-img" src="<%=basePath%>${house.pictures[0].smallFullPathName}"
							onerror="this.src='<%=basePath%>${house.pictures[0].fullPathName}'" />
						</c:if>
					</p>
				</div>
				<div class="small_picture" style="margin-top: 10px;">
					<a class="small_left"><div title="上一张" id="aleft"></div></a>
					<div id="small_center">
						<ul style="width: 576px;" id="con">
							<c:forEach var="hp" items="${house.pictures}">
								<li>
									<a href="javascript:void(0)" onclick="return false">
										<img src="<%=basePath%>${hp.smallFullPathName}"
											onerror="this.src='<%=basePath%>${hp.fullPathName}'"
											height="33" width="53" />
									</a>
								</li>
							</c:forEach>
						</ul>
					</div>
					<a class="small_right"><div title="下一张" id="aright"></div></a>
				</div>
			</div>
			<div class="house_detail_m fl ml20" style="font-size: 1.2em; font-weight: bold;">
				<table>
					<tbody>
					<% if (isRent) { %>
						<tr>
							<td colspan="2" style="line-height: 27px;">
								租&nbsp;&nbsp;&nbsp;&nbsp;金：
								<span class="f22" style="color:#eb6100;"><strong>${house.rentPrice}</strong></span>元/月(${house.rentPayType.name})
							</td>
						</tr>
					<% } else {%>
						<tr>
							<td colspan="2" class="td_wid" style="line-height: 27px;">
								单&nbsp;&nbsp;&nbsp;&nbsp;价：<span class="f22"style="color:#eb6100;"><strong>${house.salePrice}</strong></span>元/平米
							</td>
						</tr>
					<% } %>
						<tr><td height="10px"></td></tr>
						<tr>
							<td colspan="2">
								面&nbsp;&nbsp;&nbsp;&nbsp;积：${house.space}平米
							</td>
						</tr>
						<tr><td height="10px"></td></tr>
						<!-- <tr>
							<td colspan="2" class="contact_person_td">
								<div class="contact_person mb15 mt15 tl">
									<div>
										<strong>${house.employee.phone}</strong><em>${house.employee.username}</em>
									</div>
									<div>
										联系我时，请说是在三棵松房产看到的，谢谢！
									</div>
								</div>
							</td>
						</tr>
						<tr><td height="10px"></td></tr>
						 -->
						<tr>
							<td colspan="2">
								小&nbsp;&nbsp;&nbsp;&nbsp;区：
								<a href="<%=basePath%>sks/districtInfo.do?method=base&menuName=village&buildingId=${house.building.buildingId}" target="_blank">${house.building.name}（查看小区信息）</a>
							</td>
						</tr>
						<tr><td height="10px"></td></tr>
						<tr>
							<td>
								户&nbsp;&nbsp;&nbsp;&nbsp;型：${house.houseType.name}
							</td>
							<td>
								物业类型：${house.propertyType.name}
							</td>
						</tr>
						<tr><td height="10px"></td></tr>
						<tr>
							<td>
								楼&nbsp;&nbsp;&nbsp;&nbsp;层：第${house.floorAt}层、共${house.floorAll}层
							</td>
							<td>
								建造年代：<c:if test="${house.beginDate eq null}">暂无资料</c:if><c:if test="${house.beginDate ne null}"><fmt:formatDate value="${house.beginDate}" type="date"/></c:if>
							</td>
						</tr>
						<tr><td height="10px"></td></tr>
						<!-- <tr>
							<td colspan="2">
								房屋产权：
								<c:if test="${houseProperty eq null || houseProperty eq ''}">暂无资料</c:if>
								<c:if test="${houseProperty ne null && houseProperty ne ''}">${houseProperty}</c:if>
							</td>
						</tr>
						<tr>
							<td colspan="2">
								管&nbsp;&nbsp;理&nbsp;费：
								<c:if test="${house.managePrice eq null || house.managePrice eq ''}">暂无资料</c:if>
								<c:if test="${house.managePrice ne null && house.managePrice ne ''}">${house.managePrice}</c:if>
							</td>
						</tr> -->
						<tr>
							<td colspan="2">
							联系经纪人：
								<div class="contact_person mb15 mt15 tl">
								<strong>${house.employee.phone}</strong><em>${house.employee.username}</em>
								</div>								
							</td>
						</tr>
					</tbody>
				</table>
				<p style="text-align: right;">
					<a href="javascript:void(0)" id="collectHouse"
						onclick="<%= isCollected ? "del_attentioncommunity()" : "add_attentioncommunity()"%>"
						class="tit_b"><%= isCollected ? "取消收藏" : "收藏房源"%></a>		
				</p>
			</div>
			<div class="house_aboutr fr">
				<div style="margin-left:25px;width: 250px;">
					<div class="shadow_img1" id="img"  >
						<c:if test="${!empty house.employee.imagePath}">
						<img style="vertical-align:middle;" height="150" width="100" src="${house.employee.imagePath}"
						onerror="this.src='<%=basePath%>images/noAavtar.jpg'" />
						</c:if>
						<c:if test="${empty house.employee.imagePath}">
						<img style="vertical-align:middle;" height="150" width="100" src="<%=basePath%>images/noAavtar.jpg"/>
						</c:if>
					</div>
				</div>
				<p>经纪人：${house.employee.username}</p>
				<p>联系电话：<span class="color_c00 fb">${house.employee.phone}</span></p>
			</div>
		</div>
	</div>
	<div class="house_about bc clearfix mb10">
		<div class="house_aboutl fl">
		<div>
			<div id="tab6" class="tab6 mb10">
				<ul class="tab6_nav clearfix">
					<li class="on">
						<span><a href="#description">房源描述</a></span>
					</li>
					<c:if test="${fn:length(house.videos) ne 0}">
					<li>
						<span><a href="#video">房源视频</a></span>
					</li>
					</c:if>
					<li>
						<span><a href="#pic">房源图片</a></span>
					</li>
					<li>
						<span><a href="#map">地理位置</a>
						</span>
					</li>
					<li>
						<span><a href="#gallery">小区信息</a></span>
					</li>
					<li class="tab6_nav_lastitem">
						<span><a href="#comment">评论</a></span>
					</li>
				</ul>
				<div class="tab6_con">
					<div id="description">
						${house.intro}
					</div>
					<div class="bd"></div>
					<!-- <div class="contact_person contact_person1 mb30">
						<div>
							<strong>${house.employee.phone}</strong><em>${house.employee.username}</em>
						</div>
						<div>
							联系我时，请说是在三棵松房产看到的，谢谢！
							<a class="tit_b" href="javascript:void(0)">收藏房源</a>
						</div>
					</div> -->
				</div>
			</div>
			<!--房源视频-->
			<c:if test="${fn:length(house.videos) ne 0}">
			<div id="video" class="info_mode house_photo mb10">
				<h2>
					<span><a href="#" name="houseimgs">房源视频</a></span>
				</h2>
				<div class="info_mode_wrap house_photo_con">
				<c:forEach var="vv" items="${house.videos}">
					<p>
						<embed src="<%=basePath%>${vv.fullPathName}" autoplay="false" autostart="false" width="485" height="200" align="middle" type="application/x-shockwave-flash"></embed>
					</p>
					<br>
				</c:forEach>
				</div>
			</div>
			</c:if>
			<!--房源图片-->
			<div id="pic" class="info_mode house_photo mb10">
				<h2>
					<span><a href="#" name="houseimgs">房源图片</a></span>
				</h2>
				<div class="info_mode_wrap house_photo_con">
				<c:if test="${fn:length(house.pictures) eq 0}">
					<p>
						<img class="sn_img"
							src="<%=basePath%>sks/img/frontpages/lack_house_b.png" width="485">
					</p>
				</c:if>
				
				<c:forEach var="hp" items="${house.pictures}">
					<p>
						<img class="sn_img" 
							title="${house.building.name} 图片仅供参考" alt="${house.building.name} 图片仅供参考"
							src="<%=basePath%>${hp.fullPathName}" width="485" />
					</p>
					<br>
				</c:forEach>
				
				</div>
			</div>
			<!--位置-->
			<div id="map" class="info_mode mb20">
				<h2>
					<span><a href="#" name="housedes" onclick="return fasle;">${house.building.name}地图位置</a></span>
				</h2>
				<div class="info_mode_wrap">
					<div class="clearfix mt30 ml15 pb20">
						<div class="mapContainer" id="container" align="center"
							style="width: 90%; height: 300px; border: #ccc solid 1px; margin-top: 10px; margin-bottom: 10px; margin-left: 30px">
						</div>
						<div class="fl ml20" style="text-align: left; width: 80%">
							<p>
								<span>地址：</span>${house.building.address}
							</p>
							<p>
								<span>交通：</span>${house.building.trafficInfo ne null ? house.building.trafficInfo : "暂无资料"}
							</p>
							<p>
								<span>地铁：</span>
								
								<c:if test="${house.metroStation.metroName ne null}">${house.metroStation.metroName}&nbsp;${house.metroStation.name}</c:if>
								<c:if test="${house.metroStation.metroName eq null}">${house.building.metroStation.metroName}&nbsp;${house.building.metroStation.name}</c:if>
								
							</p>
							<p>
								<a href="#" target="_blank">查看大地图&gt;&gt;</a>
							</p>
						</div>
					</div>
				</div>
			</div>
			<!--周边-->
			<div class="info_mode mb10">
				<a name="gallery" id="gallery">&nbsp;</a>
				<h2>
					<span><a href="<%=basePath%>client/action/districtInfo.do?method=base&menuName=village&buildingId=${house.building.buildingId}" name="areainfos" onclick="return false;" target="_blank">${house.building.name}简介</a></span>
				</h2>
				<div class="info_mode_wrap">
					<div class="clearfix mt20">
						<div class="fl ml15">
							<a href="#"><img
								src="<%=basePath%>${house.building.pictures['0'].fullPathName}"
								alt="${house.building.name}图片" height="220" width="351">
							</a>
						</div>
						<div class="fl ml30 zhoubian_info">
							<p>
								<span>学校：</span>${house.building.educate ne null && house.building.educate ne "" ? house.building.educate : "暂无资料"}
							</p>
							<p>
								<span>购物：</span>${house.building.trade ne null && house.building.trade ne "" ? house.building.trade : "暂无资料"}
							</p>
							<p>
								<span>银行：</span>${house.building.financial ne null && house.building.financial ne "" ? house.building.financial : "暂无资料"}
							</p>
							<p>
								<span>医院：</span>${house.building.medical ne null && house.building.medical ne "" ? house.building.medical : "暂无资料"}
							</p>
							<p class="last_p">
								<a href="<%=basePath%>sks/districtInfo.do?method=base&menuName=village&buildingId=${house.building.buildingId}" target="_blank">查看${house.building.name}详细信息&gt;&gt;</a>
							</p>
						</div>
					</div>
					<div class="info_mode-row2">
						<div class="info_mode-row2_tit">
							<h6 class="tl pl20">更多图片：</h6>
						</div>
						<ul class="clearfix">
						<c:forEach var="bp" items="${house.building.pictures}">
							<li><a class="pic" href="<%=basePath%>${bp.fullPathName}" target="_blank">
								<img alt="小区图" src="<%=basePath%>${bp.smallFullPathName}" height="148" width="180"
									onerror="this.src='<%=basePath%>${bp.fullPathName}'" />
							</a></li>
						</c:forEach>
						</ul>
					</div>
				</div>
			</div>
				
				<!-- 评论 -->
			<div id="comment" class="info_mode mb20">
				<h2><span><a href="javascript:void(0);" onclick="return false;">评论</a></span></h2>
				<div class="info_mode_wrap">
					<div class="clearfix mt30 pb20">
						<div class="fl info_mode_pos" style="width: 94%; margin: 0px 22px 0px;">
							<div class="bigbox">
								<table align="center" width="100%">
									<% int i = 1; %>
									<c:forEach var="comment" items="${house.comments}">
										<tr>
											<td width="50%" align="left">${comment.users.loginName}&nbsp;说</td>
											<td width="50%" align="right">#<%=i++%></td>
										</tr>
										<tr><td colspan="2" style="word-break:normal;word-wrap:normal;width:710px">${comment.content}</td></tr>
										<tr><td align="left" colspan="2"><HR style="FILTER: alpha(opacity=100,finishopacity=0,style=1);  margin-bottom: 20px;" width="100%" color=#987cb9 SIZE=3></td></tr>
									</c:forEach>
									<c:if test="${fn:length(house.comments) == 0}">
									<tr>
										<td width="50%" align="left">暂无评论</td>
									</tr>
									</c:if>
									<tr>
										<td colspan="2" height="5">&nbsp;</td>
									</tr>
									<%
									Users user = WebUtil.getUsers(request);
									%>
									<% if (null != user) { %>
									<tr>
										<td colspan="2" width="90%" align="left">
										<form action="/user/house/comment.do" method="post" onsubmit="if(this.content.value == '') {alert('内容不能为空');return false;}">
										<input type="hidden" name="menuName" value="<%=menuName%>">
										<input type="hidden" name="method" value="add">
										<input type="hidden" name="houseId" value="${house.houseId}">
										我来说两句&gt;&gt;<br/>
										<textarea name="content" rows="16" cols="90" style=""></textarea><input type="submit" value="提交"/>
										</form>
										</td>
									</tr>
									<% } else { %>
									<tr>
										<td colspan="2" width="90%" align="left">
										想说两句？<a href="javascript:goLoginPage('<%=basePath%>sks/house.do?method=info&houseId=${house.houseId}#comment')">登录吧</a>
										</td>
									</tr>
									<% } %>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		</div>
		<div class="side_content">
			<div class="historybox nolist">
				<h4 style="margin-bottom: 5px;">你最近浏览过的房源</h4>
				<table id="historyhouse"></table>
			</div>
			<div id="IFX_p13" style="clear: both; margin: 15px 0 15px 0px;"></div>
	
			<div
				style="width: 210px; height: 220px; margin: 0 auto; padding: 9px 0 9px 9px; margin-top: 5px;"
				id="adanjuke_zoneid_comm_001"></div>
		</div>			
	</div>
	<!-- footer starts here -->	
	<jsp:include page="../rooster.jsp"></jsp:include>
	<!-- footer ends here -->
	</div>
</body>
<script type="text/javascript">
changeMenu('<%=menuName%>');
function getHistoryHouse() {
	$.ajax({
        type : "POST",
        url : "/sks/house.do",
        data : "method=history",
        dataType : "text",
        success : callback
    });
}
function callback(data) {
	var obj = $('#historyhouse');
	obj.html(data);
}
getHistoryHouse();

var aleft=document.getElementById("aleft");
var aright=document.getElementById("aright");
var big=document.getElementById("preview-img");
var small=document.getElementById("small_center");
var cont=document.getElementById("con");
var smallimg=cont.getElementsByTagName("img");
var a = 0;
var wd=64;
function addEventHandler(oTarget, sEventType, fnHandler) {
   if (oTarget.addEventListener) {
      oTarget.addEventListener(sEventType, fnHandler, false);
   } else {
      oTarget["on" + sEventType] = fnHandler;
   }
};
function tabchange(){
   for(var i=0;i<smallimg.length;i++){
   	  addEventHandler(smallimg[i],"click",function(){ changecss(this);});
   }
};
function changecss(ospan) {
   for(var i=0;i<smallimg.length;i++){
    if(ospan == smallimg[i]){
     big.src=smallimg[i].getAttribute('src');
	 //big.jqimg=big.src;
	 big.jqimg=smallimg[i].getAttribute('wtsrc');
     big.alt=smallimg[i].alt;
     smallimg[i].parentNode.parentNode.className="selected";
     a=i;
    }else{
     smallimg[i].parentNode.parentNode.className="";
    }
   }
};
tabchange();

function add() {
   if(a<1){
    return false;
   };
   smallimg[a-1].parentNode.parentNode.className="selected";
   smallimg[a].parentNode.parentNode.className="";
   big.src=smallimg[a-1].getAttribute('src');
   //big.jqimg=big.src;
   big.jqimg=smallimg[a-1].getAttribute('wtsrc');
   big.alt=smallimg[a-1].alt;
   a--;
   if(small.scrollLeft<cont.offsetWidth){
	small.scrollLeft=small.scrollLeft-wd;
   }
};
aleft.onclick= function (){
   add();
};
function sub() {
   if(a>=smallimg.length-1){
    return false;
   };
   smallimg[a+1].parentNode.parentNode.className="selected";
   smallimg[a].parentNode.parentNode.className="";
   big.src=smallimg[a+1].getAttribute('src');
   //big.jqimg=big.src;
   big.jqimg=smallimg[a+1].getAttribute('wtsrc');
   big.alt=smallimg[a+1].alt;
   a++;
   if(small.scrollLeft<cont.offsetWidth){
    small.scrollLeft=small.scrollLeft+wd;
   }
};
aright.onclick=function (){
   sub();
};
</script>
<script type="text/javascript">
$(document).ready(function(){
	toLoginstatus();
});

function goLoginPage(directUrl) {
	var loginHref = "<%=basePath%>sks/privilege/users/logon.do";
	if (directUrl) {
		loginHref = loginHref + "?directUrl=" + escape(directUrl);
	}
	window.location.href = loginHref;
}

function toLoginstatus(){
	var user =  '${user}';
	if(user!="nobody"){
		$.cookie("individual",user,{expires:1});
	}
}
function add_attentioncommunity(cid)
{
	var user =  '${user}';
    var a=$.cookie('individual');

	var houseId = '${house.houseId}';
	
	if ('${user}'=="nobody" || !a)
	{
		alert("请先登录！");
	    window.location.href='/sks/privilege/users/logon.do';
	}else{
		$.post("/sks/districtCommunity.do", {method:"add_attentioncommunity","houseId":houseId},
	    function (data){
			alert(data[0].message);
			changeCollectLabel(false);
	    }, "json");
	}
};
function del_attentioncommunity(cid)
{
	var user =  '${user}';
    var a=$.cookie('individual');

	var houseId = '${house.houseId}';
	
	if ('${user}'=="nobody" || !a)
	{
		alert("请先登录！");
	    window.location.href='/sks/privilege/users/logon.do';
	}else{
		$.post("/sks/districtCommunity.do", {method:"del_attentioncommunity","houseId":houseId},
	    function (data){
			alert(data[0].message);
			changeCollectLabel(true);
	    }, "json");
	}
};

function changeCollectLabel(showAdd) {
	var collectHouse = document.getElementById("collectHouse");
	if ( collectHouse ) {
		if (showAdd) {
			collectHouse.innerHTML = "收藏房源";
			collectHouse.onclick = add_attentioncommunity;
		} else {
			collectHouse.innerHTML = "取消收藏";
			collectHouse.onclick = del_attentioncommunity;
		}
	}
}
</script>
</html>